<!DOCTYPE html>
<html>

<head>
    <title>我的消息</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script>
        var loading = false;
        var arr = [];
        var totalPage;//总页数
        var currentPage = 1;
        function query(){
            if (!loading) {
                loading = true;
                $.get(baseUrl + "/users/" + user.id + "/informations",{currentPage: currentPage, type:3}, function (data) {
                    $.merge(arr, data.list);
                    var json = {"list": arr};
                    console.log(json);
                    $("#information").renderValues(json,{
                        "dataTarget":function (item, value) {
                            $(item).attr("data-id", value);
                            $(item).attr("data-target", "#collapseExample"+value)
                        },
                        "getId":function (item, value) {
                            $(item).attr("id", "collapseExample"+value);
                        },
                        "getText":function (item, value) {
                            console.log(value);
                            if (value){
                                $(item).html("历史消息")
                            } else{
                                $(item).html("您有一条新短消息")
                            }
                        }
                    });
                    //等页面加载完毕之后,监听点击事件.
                    $(".look-btn").click(function () {
                        var btn = $(this);
                        var infoId = $(this).data("id");
                        if (infoId!=null){
                            $.ajax({
                                url: baseUrl + "users/" + user.id + "/informations/"+infoId,
                                type: "PUT",
                                success:function(data){
                                    if (data.data == 1&& data.success){
                                        btn.prev("span").html("历史消息");
                                    }
                                }
                            });
                        }
                    });
                    //没查询一次当前页数加1
                    currentPage++;
                    //获取数据的总页数
                    totalPage = data.pages;
                    loading = false;//加载完成后把状态改成可以发送请求的状态
                })
            }
        }
        $(function () {
            query();
            $(window).scroll(function () {
                //如果页面的滚动长度加窗口长度等于页面的总长度时 发送请求查询下一页数据
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 50) {//提前五十像素发送请求
                    //当前页小于总页数的时候才查询
                    if (currentPage <= totalPage && loading != true) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoIcon: '../img/icon/loading.gif',
                            infoText: '没有更多的页面了.',
                            autoClose: 2500
                        });
                    }

                }
            })
        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的消息</span>
        </div>
        <div class="col"></div>
    </div>
</div>
<div id="information">


<ul class="list-group"  render-loop="list">

                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span><i class="fa fa-bell"></i></span>
                    <div style="float: left;">
                        <a href="javascript:;">
                            <span render-key="list.isRead" render-fun="getText"></span>
                            <button class="btn btn-sm look-btn" type="button" data-toggle="collapse"

                                    aria-expanded="false" aria-controls="collapseExample" render-fun="dataTarget" render-key="list.inforId" data-id="">
                                点击立即查看
                            </button>
                            <div class="collapse" render-fun="getId" render-key="list.inforId">
                                <div class="well" render-html="list.inforContent">
                                </div>
                            </div>
                        </a>
                    </div>

                </li>



</ul>
</div>
</body>

</html>